﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="author" type="text/html" href="https://plus.google.com/+MuazKhan">
    <meta name="author" content="Muaz Khan">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>FileBufferReader over Socket.io</title>

    <!-- for HTML5 el styling -->
    <script>
        document.createElement('article');
        document.createElement('footer');
    </script>

    <script src="/socket.io/socket.io.js">
    </script>
    <script src="/node_modules/fbr/FileBufferReader.js">
    </script>
    <script src="demo/ui.js"></script>

    <link rel="stylesheet" href="demo/style.css">
    <link rel="stylesheet" href="demo/circular-progress-bar.css">
</head>

<body>
    <article>
        <header style="text-align: center;">
            <h1>
                FileBufferReader over Socket.io
            </h1>

            <p style="margin-top: 20px;">
                <a href="https://www.webrtc-experiment.com/">HOME</a>
                <span> &copy; </span>
                <a href="http://www.MuazKhan.com/" target="_blank">Muaz Khan</a> .
                <a href="http://twitter.com/WebRTCWeb" target="_blank" title="Twitter profile for WebRTC Experiments">@WebRTCWeb</a> .
                <a href="https://github.com/muaz-khan?tab=repositories" target="_blank" title="Github Profile">Github</a> .
                <a href="https://github.com/muaz-khan/FileBufferReader/issues?state=open" target="_blank">Latest issues</a> .
                <a href="https://github.com/muaz-khan/FileBufferReader/commits/master" target="_blank">What's New?</a>
            </p>
        </header>

        <div class="github-stargazers"></div>

        <blockquote>
            <a href="https://www.youtube.com/watch?v=gv8xpdGdS4o" target="_blank">Watch a YouTube video</a> to understand how it works.

            <br><br>
            <a href="https://www.npmjs.com/package/fbr-client"><img src="https://img.shields.io/npm/v/fbr-client.svg"></a>
            <a href="https://www.npmjs.com/package/fbr-client"><img src="https://img.shields.io/npm/dm/fbr-client.svg"></a>
            <code>npm install <a href="https://www.npmjs.com/package/fbr-client">fbr-client</a></code>
        </blockquote>

        <section id="main-container" class="experiment">
            <h2 class="specific-h2"><a id="demo" href="#demo">FileBufferReader Demo</a></h2>

            <div style="text-align:center;margin-top: 30px;">
                <button id="select-file" disabled style="font-size: 2em;">Select or Drop a File</button>
            </div>

            <ol class="output-panel"></ol>

            <blockquote>Open same URL on two or more tabs.</blockquote>
        </section>

        <blockquote>
            FileBufferReader is a JavaScript library reads file and returns chunkified array-buffers. The resulting buffers can be shared using WebRTC data channels or socket.io.
        </blockquote>
    </article>

    <a href="https://github.com/muaz-khan/FileBufferReader" class="fork-left"></a>

    <footer>
        <p>
            <a href="https://www.webrtc-experiment.com">WebRTC Experiments</a> © <a href="https://plus.google.com/+MuazKhan" rel="author" target="_blank">Muaz Khan</a>
            <a href="mailto:muazkh@gmail.com" target="_blank">muazkh@gmail.com</a>
            <a href="https://github.com/muaz-khan" target="_blank">Github</a>
        </p>
    </footer>
</body>

</html>